<template>
  <div class="musiclyric">
    <div class="musiclyric-text">
      <div class="musicinfo-empty"
           v-if="!musicInfo.SW">没有歌词</div>
      <div v-html="formatText(musicInfo.SW)"></div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  name: 'musiclyric',
  data() {
    return {
      connect: false,
      status: true,
      tempInfo: {},
    };
  },
  computed: {
    ...mapState({
      musicInfo: state => state.musicplayer.musicInfo,
    }),
  },
  methods: {
    formatText(text) {
      if (!text) {
        return '';
      }
      const arr = text.split('\r\n');
      const result = arr.map((value) => {
        if (value) {
          return `<p>${value}</p>`;
        }
        return '<br>';
      });
      return result.join('');
    },
  },
  mounted() {

  },
};
</script>
<style lang="scss" scoped>

.musiclyric-text {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6em;
}
</style>
